<template>
  <div>
    <el-input
      readonly
      v-model="changeValue"
      clearable
      @click="handleOpen"
      prefix-icon="ele-Calendar"
      :placeholder="item.placeholder"
      popper-class="t-date-picker"
    ></el-input>
    <van-popup
      v-model:show="showPopup"
      position="bottom"
      :style="{ height: '60%' }"
    >
      <van-picker-group
        title=""
        :tabs="selectTabs"
        @confirm="onConfirm"
        @cancel="onCancel"
      >
        <van-date-picker
          v-model="currentDate"
          :min-date="minDate"
          :columns-type="dateColumnsTypes[item.type]"
          v-if="hasDate"
        />
        <van-time-picker
          v-model="currentTime"
          :columns-type="timeColumnsTypes[item.type]"
          v-if="hasTime"
        />
      </van-picker-group>
    </van-popup>
  </div>
</template>

<script name="MobileTDateTime" setup>
import dayjs from "dayjs";
import { formEmits, formItemProps, useFormItem } from "@/views/formgen/components/FormItem/hooks/useFormItemHook";
import { onMounted, ref } from "vue";
import { i18n } from "@/i18n";

const props = defineProps({
  ...formItemProps,
  models: {
    type: Object,
    default: () => {}
  }
});
const emits = defineEmits(formEmits);
const formItemHook = useFormItem(props, emits);
const { changeValue } = formItemHook;

const dateFormat = (fmt, date) => {
  const day = dayjs(date);
  return day.format(fmt);
};

const minDate = ref(new Date(1800, 0, 1));

const parseDate = (fmt, date) => {
  //，iOS 不支持以中划线分隔的日期格式，正确写法是 new Date('2020/01/01')。
  const newFmt = fmt.replaceAll("-", "/");
  return dayjs(date, newFmt);
};

const selectTabs = ref([]);

const dateColumnsTypes = {
  date: ["year", "month", "day"],
  datetime: ["year", "month", "day"],
  year: ["year"],
  month: ["year", "month"]
};

const timeColumnsTypes = {
  time: ["hour", "minute"],
  datetime: ["hour", "minute", "second"]
};

const hasDate = ref(false);
const hasTime = ref(false);

onMounted(() => {
  // models 存在说明为填写页面 表单设计器中无需填充默认值
  if (props.item.config.defaultNowTime && props.models) {
    changeValue.value = dateFormat(props.item.format, new Date());
  }
  console.log(props.item.type);
  if (props.item.type !== "time") {
    selectTabs.value.push(i18n.global.t("formgen.datePicker.selectDate"));
    hasDate.value = true;
  }
  if (props.item.type === "time" || props.item.type === "datetime") {
    selectTabs.value.push(i18n.global.t("formgen.datePicker.selectTime"));
    hasTime.value = true;
  }
});

const showPopup = ref(false);

const currentDate = ref([]);
const currentTime = ref([]);

const handleOpen = () => {
  const date = changeValue.value ? dayjs(changeValue.value) : new Date();
  // 判断是不是包含日期
  if (props.item.type !== "time") {
    currentDate.value = dateFormat(props.item.format, date).split("-");
  }
  console.log(currentDate.value);
  if (props.item.type === "time" || props.item.type === "datetime") {
    currentTime.value = dateFormat(props.item.format, date).split(":");
  }
  showPopup.value = true;
};

const onConfirm = () => {
  console.log(`${currentDate.value.join("/")} ${currentTime.value.join(":")}`);
  const date = parseDate(props.item.format, `${currentDate.value.join("/")} ${currentTime.value.join(":")}`, false);
  changeValue.value = dateFormat(props.item.format, date);
  console.log(dateFormat(props.item.format, date));
  showPopup.value = false;
};

const onCancel = () => {
  showPopup.value = false;
};
</script>
